<template>
    <div class="dangan">
        <section class="content-header">
            统计分析&nbsp;/&nbsp;历史数据查询
        </section>
        <section class="title">
            <div class="find">
                <div class="clearfix">
                    <div class="col-md-3 clearfix">
                        <yingyesuo v-model="form.deptId" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <pianqu v-model="form.areaId" :areaId="form.deptId"/>
                    </div>
                    <div class="col-md-3 clearfix">
                        <yonghu-type v-model="form.userType" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <label class="col-md-4 control-label">用户名称：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" placeholder="请输入用户名称" v-model="form.userName">
                        </div>
                    </div>
                </div>
                <div class="clearfix">
                    <div class="col-md-3 clearfix">
                        <hangye v-model="form.businessType" />
                    </div>
                    <div class="col-md-3 clearfix">
                        <div class="form-group common clearfix">
                            <label class="col-sm-4 control-label">月均用水：</label>
                            <div class="col-sm-8">
                                <select class="form-control select2" style="width: 100%;" v-model="form.avgMonth">
                                    <!-- <option value="" disabled selected style='display:none;'>请选择</option> -->
                                    <option value="" selected>全部</option>
                                    <option v-for="lst in avgmonthList" :value="lst.name" :key="lst.value">{{lst.name}}</option>
                                </select>

                            </div>
                        </div>
                    </div>
                    <div class="col-md-3 clearfix">
                        <label class="col-md-4 control-label">用户编号：</label>
                        <div class="col-md-8">
                            <input type="email" class="form-control" placeholder="请输入用户编号" v-model="form.userNum">
                        </div>
                    </div>
                    <div class="col-md-1 col-md-offset-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="$refs.page.getList(1)">查询</button>
                    </div>
                    <div class="col-md-1 clearfix">
                        <button type="button" class="btn btn-primary" @click="reset()">重置</button>
                    </div>
                </div>
            </div>
        </section>
        <section class="main clearfix">
            <div class="box">
                <div class="box-body">
                    <table id="example" class="table table-bordered table-hover" style="font-size:14px;text-align:center">
                        <thead style="font-weight:700">
                            <tr>
                                <td>用户名称</td>
                                <td>所属片区</td>
                                <td>本年度管网供水(万方)</td>
                                <td>本年度自备取水(万方)</td>
                                <td>月均用水(m³)</td>
                                <td>月均产销差(%)</td>
                                <td>欠费情况</td>
                                <td>本年度排水(万方)</td>
                                <td>操作</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-if="list.length==0">
                                <td colspan="999">暂无数据</td>
                            </tr>
                            <tr v-for="item in list" :key="item.value">
                                <td>{{item.userName}}</td>
                                <td>{{item.areaName}}</td>
                                <td>{{item.supplyYear}}</td>
                                <td>{{item.otherYear}}</td>
                                <td>{{item.avgMonth}}</td>
                                <td>{{item.cxcMonth}}</td>
                                <td><span v-if='item.costNow==1'>欠费</span><span v-if='item.costNow!=1'>不欠费</span></td>
                                <td>{{item.drainYear}}</td>
                                <td>
                                    <router-link :to="{path:'details',query:{userNum:item.userNum,userName:item.userName}}">历史详情</router-link>
                                    <i style="width:30px;display:inline-block"></i>
                                    <router-link :to="{path:'jiaofei',query:{userNum:item.userNum}}">缴费情况</router-link>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-md-offset-8 col-md-4 clearfix" style="margin-top:20px;">
                <ctrlPage :setPage="getList" :type="type" ref="page" />
            </div>
        </section>
    </div>
</template>

<script>
import pianqu from "@/components/common/area.vue";
import hangye from "@/components/common/hangye.vue";
import yingyesuo from "@/components/common/yingyesuo.vue";
import yonghuType from "@/components/common/yonghuType.vue";
import yongshuiType from "@/components/common/yongshuiType.vue";
import ctrlPage from "@/components/common/ctrlPage.vue";

export default {
    data() {
        return {
            type: "total, prev, pager, next, jumper",
            form: {
                areaId: '',
                deptId: '',
                userNum: '',
                userName: '',
                userType: '',
                businessType: '',
                avgMonth: ''
            },
            avgmonthList: [],
            total: '',
            list: []
        }
    },
    components: {
        pianqu, hangye, yingyesuo, yonghuType, yongshuiType, ctrlPage
    },
    mounted() {
        this.getAvgmonth()
        this.$refs.page.getList(1)
    },
    methods: {
        getAvgmonth() {
            this.$api.tongji.avgmonth().then(res => {
                if (res.success) {
                    this.avgmonthList = res.data
                }
            });
        },
        getList(pageIndex, pageSizes, callback) {
            this.$api.tongji.statisticsList({
                pageNum: pageIndex || 1,
                pageSize: pageSizes || 3,
                areaId: this.form.areaId,
                deptId: this.form.deptId,
                userNum: this.form.userNum,
                userName: this.form.userName,
                userType: this.form.userType,
                businessType: this.form.businessType,
                avgMonth: this.form.avgMonth
            }).then(res => {
                if (res.success) {
                    // console.log(res.data)
                    this.list = res.data.list
                    this.total = res.data.total;
                    callback(this.list, this.total);
                }
            });
        },
        //重置查询条件
        reset() {
            this.form.areaId = ''
            this.form.deptId = ''
            this.form.userNum = ''
            this.form.userName = ''
            this.form.userType = ''
            this.form.businessType = ''
            this.form.avgMonth = ''
        }
    }
}
</script>

<style>
</style>
